<template>
  <div class="semp-city" @click="event=>event.stopPropagation()">
    <div class="has-choose-box flex-row pad-left">
      <text
        class="has-choose"
        v-for="(item,index) in cityList"
        :key="index"
        v-if="index<=showRank"
        @click="onRankClick(index)"
      >{{item.name!='0'?item.name:'Please pick'}}</text>
    </div>
    <div v-if="pageLoading=='loading'" class="loadPage">
      <floading class="indicator" color="#303030"></floading>
    </div>
    <div v-if="pageLoading=='loaded'">
      <scroller class="city-item-box" scroll-y="true">
        <div
          class="city-item pad-left"
          v-for="(item,index) in cityList[showRank].showList"
          :key="index"
          @click="onChooseClick(item)"
        >
          <text class="cityTxt">{{item.label}}</text>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
// import { cityData } from "./area.js";

import { get_region_List_all } from "../../mixin/ajax";
export default {
  props: {
    cityData: {
      default: []
    }
  },
  data() {
    return {
      pageLoading: "",
      other: {
        label: "",
        value: "0"
      },

      currentList: [],
      showRank: 0,
      cityList: [
        {
          identify: "province",
          name: "State",
          showList: []
        },
        {
          identify: "city",
          name: "City",
          showList: []
        },
        {
          identify: "county",
          name: "Suburb",
          showList: []
        },
        {
          identify: "town",
          name: "0",
          showList: []
        },
        {
          identify: "",
          name: "",
          showList: []
        },
        {
          identify: "",
          name: "",
          showList: []
        }
      ],
      valueObj: {
        province: {
          label: "",
          value: "0"
        },
        city: {
          label: "",
          value: "0"
        },
        county: {
          label: " ",
          value: "0"
        },
        town: {
          label: "",
          value: "0"
        }
      }
    };
  },
  mounted() {
    if (this.pageLoading != "loading") {
      if (this.cityData && this.cityData.length == 0) {
        this.initdata();
      } else {
        this.setData(this.cityData);
      }
    }
  },

  methods: {
    initdata() {
      this.pageLoading = "loading";
      get_region_List_all({}, (res, flag) => {
       
        if (flag && res.code == 200) {
          this.setData(res.data);
        }
      });
    },
    setData(data) {
      let stringData = JSON.stringify(data).replace(/"two":/g, '"children":');
      stringData = stringData.replace(/"three":/g, '"children":');
      stringData = stringData.replace(/"id":/g, '"value":');
      stringData = stringData.replace(/"name":/g, '"label":');

      this.cityList[0].showList = JSON.parse(stringData);
      this.currentList = this.cityList[0].showList;
      this.pageLoading = "loaded";
    },
    onChooseClick(item) {
      // this.cityList[this.showRank + 1].name = "Please pick";
      // this.cityList[this.showRank + 2].name = "Please pick";
      if (this.showRank == 0) {
        this.cityList[this.showRank + 1].name = "City";
        this.cityList[this.showRank + 2].name = "Suburb";

      } else if (this.showRank == 1) {
        this.cityList[this.showRank + 1].name = "Suburb";
      }
      if (item.children && item.children.length > 0) {
        this.valueObj[this.cityList[this.showRank].identify].label = item.label;
        this.valueObj[this.cityList[this.showRank].identify].value = item.value;
        this.cityList[this.showRank].name = item.label;
        this.showRank++;
        this.cityList[this.showRank].showList = item.children;
        this.currentList = item.children;
      } else {
        this.valueObj[this.cityList[this.showRank].identify].label = item.label;
        this.valueObj[this.cityList[this.showRank].identify].value = item.value;
        if (this.showRank === 0) {
          this.valueObj.city.label = "";
          this.valueObj.city.value = "";
          this.valueObj.county.label = "";
          this.valueObj.county.value = "";
          this.valueObj.town.label = "";
          this.valueObj.town.value = "";
        } else if (this.showRank == 1) {
          this.valueObj.county.label = "";
          this.valueObj.county.value = "";
          this.valueObj.town.label = "";
          this.valueObj.town.value = "";
        } else if (this.showRank == 2) {
          this.valueObj.town.label = "";
          this.valueObj.town.value = "0";
        }

        this.$emit("confirm", this.valueObj);
      }
    },
    onRankClick(key) {
      this.showRank = key;
      this.currentList = this.cityList[this.showRank].showList;
      
    }
  }
};
</script>

<style scoped>
div {
  font-size: 28px;
}
.semp-city {
  width: 750px;
  background-color: #fff;
}
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.pad-left {
  padding-left: 32px;
}

.has-choose-box {
  height: 100px;
  padding: 10px 32px 20px;
}

.has-choose {
  margin-right: 30px;
  padding: 0 5px;
  height: 70px;
  line-height: 70px;
  font-size: 28px;
  font-weight: 600;
  color: #4da0e0;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #4da0e0;
  min-width: 160px;
  text-align: center;
}
.active {
}

.city-item-box {
  height: 500px;
  width: 750px;
}

.city-item {
  height: 80px;
  line-height: 80px;
  padding: 0 30px;
}
.cityTxt {
  height: 80px;
  line-height: 80px;
  font-size: 28px;
}

.active {
  color: #4da0e0;
}
.loadPage {
  flex: 1;
  height: 500px;
  width: 750px;
  justify-content: center;
  align-items: center;
}
.indicator {
  width: 40px;
  height: 40px;
}
</style>
